<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>设置-个人信息</title>
    <link rel="icon" href="/img/favicon.ico">

    <link rel="stylesheet" type="text/css" href="/css/all.css"/>
    <link rel="stylesheet" type="text/css" href="/css/pages-seckillOrder.css"/>
    <script src="/js/plugins/jquery/jquery.min.js"></script>
    <script src="/js/plugins/sui/sui.min.js"></script>
    <script src="/js/address.js"></script>
    <style type="text/css">
        body, html {
            width: 90%;
            height: 90%;
            margin: 5px;
            font-family: "微软雅黑";
        }

        #allmap {
            width: 95%;
            height: 490px;
        }

        p {
            margin-left: 10px;
            font-size: 10px;
        }
    </style>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=tLAZcqYHQuuYMq0EwHEWLnKnqfYnNE45"></script>
    <script type="text/javascript"
            src="//api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>

</head>

<body>
<!-- 头部栏位 -->
<!--页面顶部-->
<div id="nav-bottom">
    <!--顶部-->
    <div class="nav-top">
        <div class="top">
            <div class="py-container">
                <div class="shortcut">
                    <ul class="fl">
                        <li class="f-item">畅购欢迎您！</li>
                        <li class="f-item">请<a href="login.html" target="_blank">登录</a>　<span><a
                                href="register.html" target="_blank">免费注册</a></span></li>
                    </ul>
                    <div class="fr typelist">
                        <ul class="types">
                            <li class="f-item"><span>我的订单</span></li>

                            <li class="f-item"><span><a href="cart.html" target="_blank">我的购物车</a></span></li>
                            <li class="f-item"><span><a href="home.html" target="_blank">我的畅购</a></span></li>
                            <li class="f-item"><span>畅购会员</span></li>
                            <li class="f-item"><span>企业采购</span></li>
                            <li class="f-item"><span>关注畅购</span></li>
                            <li class="f-item"><span><a href="cooperation.html" target="_blank">合作招商</a></span></li>
                            <li class="f-item"><span><a href="shoplogin.html" target="_blank">商家后台</a></span></li>
                            <li class="f-item"><span>网站导航</li>
                        </ul>
                    </div>

                </div>
            </div>
        </div>

        <!--头部-->
        <div class="header">
            <div class="py-container">
                <div class="yui3-g Logo">
                    <div class="yui3-u Left logoArea">
                        <a class="logo-bd" title="畅购" href="index.html" target="_blank"></a>
                    </div>
                    <div class="yui3-u Rit searchArea">
                        <div class="search">
                            <form action="" class="sui-form form-inline">
                                <!--searchAutoComplete-->
                                <div class="input-append">
                                    <input type="text" id="autocomplete" class="input-error input-xxlarge"/>
                                    <button class="sui-btn btn-xlarge btn-danger" type="button">搜索</button>
                                </div>
                            </form>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
</div>

<!--header-->
<div id="account">
    <div class="py-container">
        <div class="yui3-g home">
            <!--左侧列表-->
            <div class="yui3-u-1-6 list">

                <div class="person-info">
                    <div class="person-photo"><img src="/img/_/photo.png" alt=""></div>
                    <div class="person-account">
                        <span class="name">Michelle</span>
                        <span class="safe">账户安全</span>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="list-items">
                    <dl>
                        <dt><i>·</i> 订单中心</dt>
                        <dd><a href="/api/wcenter/tocenter">我的订单</a></dd>
                        <dd><a href="/api/wcenter/toPay">待付款</a></dd>
                        <dd><a href="/api/wcenter/toSend">待发货</a></dd>
                        <dd><a href="/api/wcenter/toReceive">待收货</a></dd>
                        <dd><a href="/api/wcenter/toEvaluate">待评价</a></dd>
                    </dl>
                    <dl>
                        <dt><i>·</i> 我的中心</dt>
                        <dd><a href="/api/wcenter/toCollect">我的收藏</a></dd>
                        <dd><a href="center-footmark.html">我的足迹</a></dd>
                    </dl>
                    <dl>
                        <dt><i>·</i> 物流消息</dt>
                    </dl>
                    <dl>
                        <dt><i>·</i> 设置</dt>
                        <dd><a href="/api/wcenter/toSettingInfo">个人信息</a></dd>
                        <dd><a href="/api/wcenter/toSettingAddress" class="list-active">地址管理</a></dd>
                        <dd><a href="/api/wcenter/toSettingSafe">安全管理</a></dd>
                    </dl>
                </div>
            </div>
            <!--右侧主内容-->
            <div class="yui3-u-5-6" id="app">
                <div class="body userAddress">
                    <div class="address-title">
                        <span class="title">地址管理</span>
                        <a data-toggle="modal" data-target=".addAddressInfo" data-keyboard="false"
                           class="sui-btn  btn-info add-new">添加新地址</a>
                        <span class="clearfix"></span>
                    </div>
                    <div class="address-detail">
                        <table class="sui-table table-bordered">
                            <thead>
                            <tr>
                                <th>姓名</th>
                                <th>地址</th>
                                <th>联系电话</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="address in addressList">
                                <td>{{address.contact}}</td>
                                <td>{{address.provinceid}}&nbsp;&nbsp;{{address.cityid}}&nbsp;&nbsp;{{address.areaid}}&nbsp;&nbsp;{{address.address}}</td>
                                <td>{{address.phone}}</td>
                                <td>
                                    <a href="#"  data-target=".editAddressInfo" data-keyboard="false"
                                       @click="echo(address.id)">编辑</a>
                                    <a href="#" @click="deleteAddress(address.id)">删除</a>
                                    <span v-if="address.isDefault==1">默认地址</span>
                                    <span v-else="address.isDefault==0"><a href="#" @click="editDefault(address.id)">设为默认</a></span>
                                </td>
                            </tr>

                            </tbody>
                        </table>
                    </div>

                    <!--新增地址弹出层-->
                    <div tabindex="-1" role="dialog" data-hasfoot="false" class="sui-modal hide fade addAddressInfo"
                         style="width:580px;" id="addModal">

                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" data-dismiss="modal" aria-hidden="true"
                                            class="sui-close">×
                                    </button>
                                    <h4 id="myModalLabel" class="modal-title">新增地址</h4>
                                </div>
                                <div class="modal-body">
                                    <form action="" class="sui-form form-horizontal">
                                        <div class="control-group">
                                            <label class="control-label">收货人：</label>
                                            <div class="controls">
                                                <input type="text" class="input-medium" v-model="insertInfo.contact">
                                            </div>
                                            <div class="controls">
                                                <button type="button" class="btn-primary" @click="handleMap()">选择地址
                                                </button>
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label">所在地区：</label>
                                            <div class="controls address">
                                                <div data-toggle="distpicker">
                                                    <div class="form-group area">
                                                        <select class="form-control province1"
                                                                v-model="insertInfo.provinceid"></select>
                                                    </div>
                                                    <div class="form-group area">
                                                        <select class="form-control city1"
                                                                v-model="insertInfo.cityid"></select>
                                                    </div>
                                                    <div class="form-group area">
                                                        <select class="form-control district1"
                                                                v-model="insertInfo.areaid"></select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label">详细地址：</label>
                                            <div class="controls">
                                                <input type="text" class="input-large" v-model="insertInfo.address">
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label">联系电话：</label>
                                            <div class="controls">
                                                <input type="text" class="input-medium" v-model="insertInfo.phone">
                                            </div>
                                        </div>

                                        <div class="control-group">
                                            <label class="control-label">地址别名：</label>
                                            <div class="controls">
                                                <input type="text" class="input-medium" v-model="insertInfo.alias">
                                            </div>
                                        </div>

                                    </form>


                                </div>
                                <div class="modal-footer">
                                    <button type="button" data-ok="modal"
                                            class="sui-btn btn-primary btn-large" @click="handleAdd()">确定
                                    </button>
                                    <button type="button" data-dismiss="modal"
                                            class="sui-btn btn-default btn-large">取消
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--修改地址弹出层-->
                    <div tabindex="-1" role="dialog" data-hasfoot="false"
                         class="sui-modal hide fade editAddressInfo" style="width:580px;" id="editModal">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" data-dismiss="modal" aria-hidden="true"
                                            class="sui-close">×
                                    </button>
                                    <h4 id="myEditModalLabel" class="modal-title">编辑地址</h4>
                                </div>
                                <div class="modal-body">
                                    <form action="" class="sui-form form-horizontal">
                                        <div class="control-group">
                                            <label class="control-label">收货人：</label>
                                            <div class="controls">
                                                <input type="text" class="input-medium" v-model="echoInfo.contact">
                                            </div>
                                            <div class="controls">
                                                <button type="button" class="btn-primary" @click="editMap()">选择地址</button>
                                            </div>
                                        </div>
                                        <div class="control-group address">
                                            <label class="control-label">所在地区：</label>
                                            <div class="controls">
                                                <div data-toggle="distpicker">
                                                    <div class="form-group area">
                                                        <select class="form-control province1"
                                                                v-model="echoInfo.provinceid">
                                                        </select>
                                                    </div>
                                                    <div class="form-group area">
                                                        <select class="form-control city1"
                                                                v-model="echoInfo.cityid">
                                                        </select>
                                                    </div>
                                                    <div class="form-group area">
                                                        <select class="form-control district1"
                                                                v-model="echoInfo.areaid">
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                        <div class="control-group">
                                            <label class="control-label">详细地址：</label>
                                            <div class="controls">
                                                <input type="text" class="input-large" v-model="echoInfo.address">
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label">联系电话：</label>
                                            <div class="controls">
                                                <input type="text" class="input-medium" v-model="echoInfo.phone">
                                            </div>
                                        </div>

                                        <div class="control-group">
                                            <label class="control-label">地址别名：</label>
                                            <div class="controls">
                                                <input type="text" class="input-medium" v-model="echoInfo.alias">
                                            </div>
                                        </div>

                                    </form>


                                </div>
                                <div class="modal-footer">
                                    <button type="button" data-ok="modal"
                                            class="sui-btn btn-primary btn-large" @click="editAddress(echoInfo.id)">确定
                                    </button>
                                    <button type="button" data-dismiss="modal"
                                            class="sui-btn btn-default btn-large">取消
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--地图弹出层-->
                    <div tabindex="-1" role="dialog" data-hasfoot="false"
                         class="sui-modal hide fade editAddressInfo" style="width:580px;height: 580px" id="mapModal">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" data-dismiss="modal" aria-hidden="true"
                                            class="sui-close">×
                                    </button>
                                    <h4 id="myMapModalLabel" class="modal-title">地图信息</h4>
                                </div>
                                <div class="top">
                                    <div class="controls">
                                        <input type="text" class="input-medium" v-model="zoom">
                                        <button type="button" class="sui-btn btn-primary" @click="search()">搜索</button>
                                    </div>
                                </div>
                                <div class="modal-body" id="allmap">
                                    <!--地图内容-->
                                </div>
                                <div class="modal-footer">
                                    <button type="button" data-ok="modal"
                                            class="sui-btn btn-primary btn-large">确定
                                    </button>
                                    <button type="button" data-dismiss="modal"
                                            class="sui-btn btn-default btn-large">取消
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 底部栏位 -->
<!--页面底部-->
<div class="clearfix footer">
    <div class="py-container">
        <div class="footlink">
            <div class="Mod-service">
                <ul class="Mod-Service-list">
                    <li class="grid-service-item intro  intro1">

                        <i class="serivce-item fl"></i>
                        <div class="service-text">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>

                    </li>
                    <li class="grid-service-item  intro intro2">

                        <i class="serivce-item fl"></i>
                        <div class="service-text">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>

                    </li>
                    <li class="grid-service-item intro  intro3">

                        <i class="serivce-item fl"></i>
                        <div class="service-text">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>

                    </li>
                    <li class="grid-service-item  intro intro4">

                        <i class="serivce-item fl"></i>
                        <div class="service-text">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>

                    </li>
                    <li class="grid-service-item intro intro5">

                        <i class="serivce-item fl"></i>
                        <div class="service-text">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>

                    </li>
                </ul>
            </div>
            <div class="clearfix Mod-list">
                <div class="yui3-g">
                    <div class="yui3-u-1-6">
                        <h4>购物指南</h4>
                        <ul class="unstyled">
                            <li>购物流程</li>
                            <li>会员介绍</li>
                            <li>生活旅行/团购</li>
                            <li>常见问题</li>
                            <li>购物指南</li>
                        </ul>

                    </div>
                    <div class="yui3-u-1-6">
                        <h4>配送方式</h4>
                        <ul class="unstyled">
                            <li>上门自提</li>
                            <li>211限时达</li>
                            <li>配送服务查询</li>
                            <li>配送费收取标准</li>
                            <li>海外配送</li>
                        </ul>
                    </div>
                    <div class="yui3-u-1-6">
                        <h4>支付方式</h4>
                        <ul class="unstyled">
                            <li>货到付款</li>
                            <li>在线支付</li>
                            <li>分期付款</li>
                            <li>邮局汇款</li>
                            <li>公司转账</li>
                        </ul>
                    </div>
                    <div class="yui3-u-1-6">
                        <h4>售后服务</h4>
                        <ul class="unstyled">
                            <li>售后政策</li>
                            <li>价格保护</li>
                            <li>退款说明</li>
                            <li>返修/退换货</li>
                            <li>取消订单</li>
                        </ul>
                    </div>
                    <div class="yui3-u-1-6">
                        <h4>特色服务</h4>
                        <ul class="unstyled">
                            <li>夺宝岛</li>
                            <li>DIY装机</li>
                            <li>延保服务</li>
                            <li>畅购E卡</li>
                            <li>畅购通信</li>
                        </ul>
                    </div>
                    <div class="yui3-u-1-6">
                        <h4>帮助中心</h4>
                        <img src="/img/wx_cz.jpg">
                    </div>
                </div>
            </div>
            <div class="Mod-copyright">
                <ul class="helpLink">
                    <li>关于我们<span class="space"></span></li>
                    <li>联系我们<span class="space"></span></li>
                    <li>关于我们<span class="space"></span></li>
                    <li>商家入驻<span class="space"></span></li>
                    <li>营销中心<span class="space"></span></li>
                    <li>友情链接<span class="space"></span></li>
                    <li>关于我们<span class="space"></span></li>
                    <li>营销中心<span class="space"></span></li>
                    <li>友情链接<span class="space"></span></li>
                    <li>关于我们</li>
                </ul>
                <p>地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100</p>
                <p>京ICP备08001421号京公网安备110108007702</p>
            </div>
        </div>
    </div>
</div>
<!--页面底部END-->
<!-- 引入组件库 -->
<script src="/js/vue.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.5.4/index.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/moment.min.js"></script>

<script>

    var app = new Vue({
        el: '#app',
        data: {
            addressList: [],
            echoInfo: {},  //编辑地址信息回显
            insertInfo: {},
            zoom: '' , //百度地址查询
            //provinceList:provinceList
        },
        methods: {
            loadAddressList: function () {
                axios.get("/api/wcenter/loadAddressList").then(resp => {
                    if (resp.data.flag) {
                        this.addressList = resp.data.data;
                        console.log("加载地址信息成功")
                    }
                })
            },
            echo: function (id) {
                $('#editModal').modal('show');
                axios.get("/api/wcenter/echo/" + id).then(resp => {
                    if (resp.data.flag) {
                        this.echoInfo = resp.data.data;
                        console.log(this.echoInfo)
                    }
                })
            },
            deleteAddress: function (id) {
                axios.delete("/api/wcenter/deleteAddress/" + id).then(resp => {
                    if (resp.data.flag) {
                        alert("删除成功");
                        this.loadAddressList();
                    }
                })
            },
            editDefault: function (id) {
                axios.put("/api/wcenter/editDefault/" + id).then(resp => {
                    if (resp.data.flag) {
                        alert("设置成功")
                        this.loadAddressList();
                    }
                })
            },
            editAddress: function (id) {
                axios.put("/api/wcenter/editAddress/" + id, this.echoInfo).then(resp => {
                    if (resp.data.flag) {
                        alert("修改成功")
                    }
                }).finally(() => {
                    //关闭模态框
                    $('#editModal').modal('hide');
                    //初始化回显数据
                    this.echoInfo = {};
                    console.log(this.echoInfo);
                    //重新加载页面
                    this.loadAddressList();
                })
            },
            handleAdd: function () {
                this.insertInfo={};
                axios.post("/api/wcenter/add", this.insertInfo).then(resp => {
                    if (resp.data.flag) {
                        alert("添加成功");
                        //重新加载页面
                        this.loadAddressList();
                    }
                }).finally(() => {
                    //关闭模态框
                    $('#addModal').modal('hide');
                    //初始化添加数据
                    this.insertInfo = {};
                    console.log(this.echoInfo);
                })
            },
            search: function () {
                this.loadMap(this.zoom);
            },
            handleMap: function () {
                $('#mapModal').modal('show');
                this.loadMap('武汉传智播客教育科创园');
            },
            editMap:function(){
                $('#mapModal').modal('show');
                let point=this.echoInfo.provinceid+this.echoInfo.cityid+this.echoInfo.areaid;
                this.loadMap(point)
            },

            loadMap: function (point) {
                //百度地图API功能
                var map = new BMap.Map("allmap");
                map.centerAndZoom(point, 13);
                map.enableDragging();  //开启拖拽
                map.enableScrollWheelZoom();  //开启滚轮
                map.enableInertialDragging(); //惯性

                var local = new BMap.LocalSearch(map, {renderOptions:{map: map}});  //智能检索
                local.search(point);

                function showInfo(e){  //点击事件先获取经纬度,再通过经纬度获取当前地址信息
                    //alert(e.point.lng + ", " + e.point.lat);
                    var gc = new BMap.Geocoder();
                    gc.getLocation(e.point, function(rs){
                        var addComp = rs.addressComponents;
                        //alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
                        //编辑框数据回显
                        var province = addComp.province+"";
                        var city = addComp.city+"";
                        var district = addComp.district+"";
                        var street = addComp.street+"";
                        app.echoInfo.provinceid=province;
                        app.echoInfo.cityid=city;
                        app.echoInfo.areaid=district;
                        app.echoInfo.address=district+street;
                        console.log(app.echoInfo);
                        //插入数据框
                        app.insertInfo.provinceid=province;
                        app.insertInfo.cityid=city;
                        app.insertInfo.areaid=district;
                        app.insertInfo.address=district+street;
                        console.log(app.insertInfo)
                    });
                }
                map.addEventListener("click", showInfo);
            }
        },
        created: function () {
            this.loadAddressList();
        }
    })
</script>
</body>

</html>